<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影院管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影院列表</el-breadcrumb-item>
         <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
         </el-breadcrumb>
     <el-divider></el-divider>
    <el-button type="primary" plain @click="showAddcinemaRoomDialog">新增放映厅</el-button>
       <el-divider content-position="left">放映厅列表</el-divider>
       <el-empty description="该影院暂无放映厅" v-if="!tableData || tableData.length==0"></el-empty>
      <el-table
      v-else
      :data="tableData"
      style="width: 100%">
      <el-table-column align="center" prop="room_name" label="放映厅名称"></el-table-column>
      <el-table-column align="center" prop="room_type" label="放映厅类型" width="200"></el-table-column>
      <el-table-column align="center" prop="room_size" label="放映厅人数">
        <template slot-scope="scope">
            <span v-if="scope.row.room_size">{{scope.row.room_size}}</span>
            <span v-else style="color:#aaa;">[请先配置座位模板]</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-view" circle 
             @click="$router.push(`/home/showingon-plan/list/${scope.row.id}`)"
             ></el-button>
              <el-button type="primary" icon="el-icon-circle-plus-outline" circle 
             @click="$router.push(`/home/showingon-plan/${scope.row.id}`)"
             ></el-button>
             <el-button type="warning" icon="el-icon-s-grid" circle 
             @click="$router.push(`/home/cinema-room-seat-template/${scope.row.id}`)"
             ></el-button>
             <el-button type="danger" icon="el-icon-delete" circle 
             @click="deleteRoom(scope.row.id)"
             ></el-button>
        </template>
      </el-table-column>
    </el-table>
       <!-- 添加放映厅弹窗 -->
<el-dialog title="新增放映厅" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="放映厅名称" label-width="100">
      <el-input v-model="form.room_name" autocomplete="off" style="width:223px;"></el-input>
    </el-form-item>
    <el-form-item label="放映厅类型" label-width="200">
      <el-select v-model="form.room_type" placeholder="请选择放映厅类型">
        <el-option 
        v-for="item in CinemaRoomTypes"
        :key="item.id"
        :label="item.type_name" 
        :value="item.type_name"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </div>
</el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,//新增放映厅窗口是否可见
                form:{
                    room_name:'',//放映厅名称
                    room_type:'',//放映厅类型
                },
                CinemaRoomTypes:[],//用于存储放映厅类型
                cienmaId:this.$route.params.id, //当前电影院id
                tableData:[],
            }
        },
        methods: {
            //显示添加放映厅弹框
            showAddcinemaRoomDialog() {
                this.dialogFormVisible = true
            },
            //获取放映厅类型
            loadAllCinemaRoomList(){
                this.$http.cinemaRoomApi.queryAlltypes().then(res => {
                    console.log(res)
                    this.CinemaRoomTypes = res.data.data
                })
            },
            //提交添加放映厅请求
            onSubmit(){
                this.$http.cinemaRoomApi.add({room_name:this.form.room_name,room_type:this.form.room_type,movie_cinema_id:this.cienmaId}).then(res => {
                    console.log(res)
                    if(res.data.code == 200){
                         this.$message({
                         message: '添加成功',
                         type: 'success'
                      });
                      this.loadCinemaRoomBycinemamId()
                      this.dialogFormVisible = false
                      this.form =[]  
                    }
                })
            },
            //获取放映厅列表
            loadCinemaRoomBycinemamId(){
                this.$http.cinemaRoomApi.list({cinema_id:this.cienmaId}).then(res => {
                    console.log(res)
                    if(res.data.code == 200){
                     this.tableData = res.data.data   
                    }
                    
                })
            },
            //删除放映厅请求
            deleteRoom(id){
                const h = this.$createElement;
                this.$msgbox({
                   title: '注意',
                   message: h('p', null, [
                    h('span', null, '该操作会永久删除放映厅，是否还要继续删除?'),
                    h('i', { style: 'color: teal' })
                 ]),
                   showCancelButton: true,
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                  beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                      instance.confirmButtonLoading = true;
                      instance.confirmButtonText = '删除中...';
                   setTimeout(() => {
                     done();
                    setTimeout(() => {
                       instance.confirmButtonLoading = false;
                    }, 300);
                 }, 800);
               } else {
                done();
              }
            }
        }).then(action => {
            this.$http.cinemaRoomApi.del({id:id}).then(res => {
                console.log(res)
                if(res.data.code == 200){
                    this.$message({
                         type: 'success',
                         message: '删除成功!'
                    })
                    this.loadCinemaRoomBycinemamId()
                }
            })
        }).catch(() =>{
             this.$message({
             type: 'info',
             message: '已取消删除'
            });        
          })
         }
     },
        mounted () {
            //加载所有放映厅类型
            this.loadAllCinemaRoomList()
            //加载当前电影院里得所有放映厅
            this.loadCinemaRoomBycinemamId()
        },
    }
</script>

<style lang="scss" scoped>

</style>